<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
#div1 div { width:200px; height:200px; border:1px #ccc solid; display:none; }
.active { background:red; }
</style>
<script>
window.onload = function() {
	// 1. 获取所有元素
	var oParent = document.getElementById('div1');
	var aBtn = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');

	// 2. 逻辑部分
	// 给每个 btn 加点击事件
	for(var i = 0; i < aBtn.length; i++) {
		// 保存索引 
		aBtn[i].index = i;
		// onclick
		aBtn[i].onclick = function() {
			// 所有的 btn 清空 class, 所有的 aDiv 先隐藏.
			for(var i = 0; i < aBtn.length; i++) {
				aBtn[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = "active";
			// 对应的 div 可见
			aDiv[this.index].style.display = 'block';
		}
	}
};
</script>
</head>
<body>
<div id="div1">
	<input type="button" value="1" class="active">
	<input type="button" value="2">
	<input type="button" value="3">
	<div style="display:block">111</div>
	<div>222</div>
	<div>333</div>
</div>
</body>
</html>
